<template>
  <div class="kuqu">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">包装管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')" v-if="USER.auth.indexOf('base_baozhuang_add')!==-1
">新增包装</el-button>
      </div>
      <s-table
        :table="table"
        :expand="false"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="80">
          <template scope="s">
            <el-button type="info" icon="edit" size="mini" @click="dialogOpen('put', s.row)" v-if="USER.auth.indexOf('base_baozhuang_edit')!==-1
"></el-button>
          </template>
        </el-table-column>
        <el-form-item label="包装名称" prop="bzmc">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_bzmc"
                    placeholder="包装名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}包装</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="bzmc" label="包装名称">
              <el-input
                type="text"
                v-model="formDialog.bzmc"
                placeholder="包装名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 10, offset: 2}">
            <el-form-item prop="bzms" label="包装描述">
              <el-input
                type="text"
                v-model="formDialog.bzms"
                placeholder="包装描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-collapse>
            <el-collapse-item title="主单位" name="1">
              <s-form :form="formDialog0" ref="formDialog0">
                <el-row>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="zdwsl" label="数量">
                      <el-input
                        type="text"
                        disabled
                        v-model="formDialog0.zdwsl"
                        placeholder="数量"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="ms" label="包装描述">
                      <el-input
                        type="text"
                        v-model="formDialog0.ms"
                        placeholder="包装描述"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="c" label="长(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog0.c"
                        placeholder="长(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="k" label="宽(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog0.k"
                        placeholder="宽(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="g" label="高(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog0.g"
                        placeholder="高(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="tj" label="体积">
                      <div class="s-content">{{formDialog0tj}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="zl" label="毛重量(克)">
                      <el-input
                        type="text"
                        v-model="formDialog0.zl"
                        placeholder="毛重量(克)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="jz" label="净重">
                      <el-input
                        type="text"
                        v-model="formDialog0.jz"
                        placeholder="净重"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="je" label="金额">
                      <el-input
                        type="text"
                        v-model="formDialog0.je"
                        placeholder="金额"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </s-form>
            </el-collapse-item>
            <el-collapse-item title="内包装" name="2">
              <s-form :form="formDialog1" ref="formDialog1">
                <el-row>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="zdwsl" label="数量">
                      <el-input
                        type="text"
                        v-model="formDialog1.zdwsl"
                        placeholder="数量"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="ms" label="包装描述">
                      <el-input
                        type="text"
                        v-model="formDialog1.ms"
                        placeholder="包装描述"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="c" label="长(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog1.c"
                        placeholder="长(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="k" label="宽(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog1.k"
                        placeholder="宽(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="g" label="高(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog1.g"
                        placeholder="高(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="tj" label="体积">
                      <div class="s-content">{{formDialog1tj}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="zl" label="毛重量(克)">
                      <el-input
                        type="text"
                        v-model="formDialog1.zl"
                        placeholder="毛重量(克)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="jz" label="净重">
                      <el-input
                        type="text"
                        v-model="formDialog1.jz"
                        placeholder="净重"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="je" label="金额">
                      <el-input
                        type="text"
                        v-model="formDialog1.je"
                        placeholder="金额"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </s-form>
            </el-collapse-item>
            <el-collapse-item title="箱" name="3">
              <s-form :form="formDialog2" ref="formDialog2">
                <el-row>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="zdwsl" label="数量">
                      <el-input
                        type="text"
                        v-model="formDialog2.zdwsl"
                        placeholder="数量"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="ms" label="包装描述">
                      <el-input
                        type="text"
                        v-model="formDialog2.ms"
                        placeholder="包装描述"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="c" label="长(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog2.c"
                        placeholder="长(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="k" label="宽(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog2.k"
                        placeholder="宽(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="g" label="高(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog2.g"
                        placeholder="高(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="tj" label="体积">
                      <div class="s-content">{{formDialog2tj}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="zl" label="毛重量(克)">
                      <el-input
                        type="text"
                        v-model="formDialog2.zl"
                        placeholder="毛重量(克)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="jz" label="净重">
                      <el-input
                        type="text"
                        v-model="formDialog2.jz"
                        placeholder="净重"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="je" label="金额">
                      <el-input
                        type="text"
                        v-model="formDialog2.je"
                        placeholder="金额"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </s-form>
            </el-collapse-item>
            <el-collapse-item title="托盘" name="4">
              <s-form :form="formDialog3" ref="formDialog3">
                <el-row>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="zdwsl" label="数量">
                      <el-input
                        type="text"
                        v-model="formDialog3.zdwsl"
                        placeholder="数量"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="ms" label="包装描述">
                      <el-input
                        type="text"
                        v-model="formDialog3.ms"
                        placeholder="包装描述"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="c" label="长(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog3.c"
                        placeholder="长(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="k" label="宽(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog3.k"
                        placeholder="宽(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="g" label="高(厘米)">
                      <el-input
                        type="text"
                        v-model="formDialog3.g"
                        placeholder="高(厘米)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="tj" label="体积">
                      <div class="s-content">{{formDialog3tj}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="zl" label="毛重量(克)">
                      <el-input
                        type="text"
                        v-model="formDialog3.zl"
                        placeholder="毛重量(克)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="jz" label="净重">
                      <el-input
                        type="text"
                        v-model="formDialog3.jz"
                        placeholder="净重"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :lg="{span: 2, offset: 0}" class="__form_right_20">
                    <el-form-item prop="je" label="金额">
                      <el-input
                        type="text"
                        v-model="formDialog3.je"
                        placeholder="金额"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </s-form>
            </el-collapse-item>
          </el-collapse>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';

  function __form_inner (bzlx) {
    let step = { zdwsl:
      { value: '1',
        rule: [ 'vNull', 'vNumber', 'vNumberZ' ],
        cRemarks: '' },
    bzlx: { value: (bzlx + ''), rule: [], cRemarks: '' },
    c: { value: '', rule: [ 'vNumber' ], cRemarks: '' },
    k: { value: '', rule: [ 'vNumber' ], cRemarks: '' },
    g: { value: '', rule: [ 'vNumber' ], cRemarks: '' },
    tj: { value: '', rule: [ 'vNumber' ], cRemarks: '' },
    zl: { value: '0', rule: [ 'vNumber' ], cRemarks: '' },
    jz: { value: '0', rule: [ 'vNumber' ], cRemarks: '' },
    ms: { value: '', rule: [ 'vNull' ], cRemarks: '' },
    mxid: { value: '', rule: [], cRemarks: '' },
    je: { value: '0', rule: [ 'vNumber' ], cRemarks: '' } };
    if (bzlx === 2) {
      step.ms.value = '箱';
    } else if (bzlx === 3) {
      step.ms.value = '托';
    }
    return step;
  }

  function __form () {
    return {
      bzmc: { value: '', rule: [ 'vNull' ], search: true },
      bzms: { value: '', rule: [ 'vNull' ], search: true },
    };
  }
  export default AutoVue({
    name: 'base_baozhuang-FEcarWms',
    store: ['USER'],
    head: {
      'title': '包装管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 包装 查看包装信息' },
      ],
    },
    data: {
      table: {
        column: [
          { label: '货主名称',
            prop: 'hzmc',
            minWidth: '0px',
            search: true,
          },
          { label: '包装名称',
            prop: 'bzmc',
            minWidth: '0px',
            search: true,
          },
          { label: '包装描述',
            prop: 'bzms',
            minWidth: '0px',
            search: false,
          },
        ],
        url: '/wmspacking/list',
        key: 'id',
        tableColumn: 3,
        muti: false,
      },
      formDialog: __form(),
      formDialog0: __form_inner(0),
      formDialog1: __form_inner(1),
      formDialog2: __form_inner(2),
      formDialog3: __form_inner(3),
      dialog: {
        title: '新增',
        row: {},
        size: 'large',
      },
    },
    transition: 'slide-fade',
    computed: {
      formDialog0tj: function () {
        let form = 'formDialog0';
        if (this[form].c && this[form].k && this[form].g) {
          this[form].tj = this[form].c * this[form].k * this[form].g;
          return this[form].tj;
        }
      },
      formDialog1tj: function () {
        let form = 'formDialog1';
        if (this[form].c && this[form].k && this[form].g) {
          this[form].tj = this[form].c * this[form].k * this[form].g;
          return this[form].tj;
        }
      },
      formDialog2tj: function () {
        let form = 'formDialog2';
        if (this[form].c && this[form].k && this[form].g) {
          this[form].tj = this[form].c * this[form].k * this[form].g;
          return this[form].tj;
        }
      },
      formDialog3tj: function () {
        let form = 'formDialog3';
        if (this[form].c && this[form].k && this[form].g) {
          this[form].tj = this[form].c * this[form].k * this[form].g;
          return this[form].tj;
        }
      },
    },
    methods: {
      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
        for (let i = 0; i < 4; i++) {
          this['formDialog' + i] = {
            ...this['formDialog' + i],
            ...this.ObjectClone(__form_inner(i)),
          };
          this.resetFields('formDialog' + i);
        }
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          break;
        case 'PUT':
          if (typeof more.list === 'undefined' || more.list.length === 0) {
            more.list = (await this.get('/wmspacking/getWmsPacking/' + more.id)).list;
          }
          this.dialog.title = '修改';
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__form(), more),
          };
          for (let i = 0; i < 4; i++) {
            let souce = {};
            more.list.forEach(value => {
              if (parseInt(value.bzlx) === i) {
                souce = value;
              }
            });
            this['formDialog' + i] = {
              ...this['formDialog' + i],
              ...this.ObjectClone(__form_inner(i), souce),
            };
          }
          this.dialog.row = more;
          break;
        }
        this.dialog.visible = true;
      },
      dialogSave () {
        let opt = {};
        this.VALIDATE('formDialog', option => {
          opt = option;
          this.VALIDATE('formDialog0', option => {
            opt.list = [];
            opt.list.push(option);
            this.VALIDATE('formDialog1', option => {
              opt.list.push(option);
              this.VALIDATE('formDialog2', option => {
                opt.list.push(option);
                this.VALIDATE('formDialog3', async option => {
                  opt.list.push(option);
                  if (this.dialog.title === '新增') {
                    let {data} = await this.post('/wmspacking/add', opt);
                    this.table.data = [data, ...this.table.data];
                    this.table.total++;
                  } else {
                    opt.id = this.dialog.row.id;
                    let {data} = await this.post('/wmspacking/edit', opt);
                    this.dialog.row.bzmc = data.bzmc;
                    this.dialog.row.bzms = data.bzms;
                    this.dialog.row.list = data.list;
                  }
                  this.dialogInit();
                  this.dialog.visible = false;
                });
              });
            });
          });
        });
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">

</style>
